<template>
  <div id="app" ref="page" >
    <!-- 顶部导航 -->
    <header id="">
      <Head></Head>
    </header>
    <!-- 导航栏 -->
    <nav>
      <Nav></Nav>
    </nav>
    <!-- 版心轮播图 -->
    <section>
      <Banner></Banner>
      <Advertising></Advertising>
    </section>

    <!-- 商品 -->
    <article>
      <!-- 广告 -->
      <div class="tp">
        <img src="./assets/banner.webp" alt="" />
      </div>
      <!-- 商品容器 -->
      <div class="Container">
        <!-- 手机 -->
        <MobilePhone></MobilePhone>
        <!-- 手表 -->
        <Watches></Watches>
        <!-- 笔记本 -->
        <Notebook></Notebook>
        <!-- 家电 -->
        <HomeElectricity></HomeElectricity>
      </div>
    </article>
    <!-- 侧边菜单栏 -->
    <div class="Sidemenu" ref="Distancetop">
      <ul>
        <li v-for="(item,index) in SideList" :key="item.url" @mousemove="index===0?Sideewm=true:Sideewm=false">
          <a href="#">
            <div class="Side_img_box">
              <img :src="item.url" alt="" />
            </div>
            <span class="text">{{item.text}}</span>
          </a>
        </li>
        <li class="retun_top" v-show="isAuth">
          <a href="#" >
            <div class="Side_img_box">
              <img src="./assets/tubiao/Side06.png" alt="" />
            </div>
            <span class="text">返回顶部</span>
          </a>
        </li>
      </ul>
      <!-- 二维码 -->
      <div  class="Side_ewm" v-show="Sideewm" @mouseleave="Sideewm=false">
          <div class="Side_ewm_img" >
                  <img src="./assets/Head/download.png" alt="">
                  <span>扫码领取新人百元礼包</span>
          </div>
      </div>
    </div>

    <!-- 页脚 -->
    <Footer></Footer>
  </div>
</template>

<script>
import "./assets/CSS/index.css";
import Head from "./components/Head";
import Nav from "./components/Nav";
import Banner from "./components/Banner";
import Advertising from "./components/Advertising";
import MobilePhone from "./components/MobilePhone";
import Watches from "./components/Watches";
import Notebook from "./components/Notebook";
import HomeElectricity from "./components/HomeElectricity";
import Footer from "./components/Footer.vue";
export default {
  name: "app",
  components: {
    Head,
    Nav,
    Banner,
    Advertising,
    MobilePhone,
    Watches,
    Notebook,
    HomeElectricity,
    Footer
},
  data() {
    return {
      SideList: [
        {
          url: require("./assets/tubiao/Side01.png"),
          text: "手机APP",
        },
        {
          url: require("./assets/tubiao/Side02.png"),
          text: "个人中心",
        },
        {
          url: require("./assets/tubiao/Side03.png"),
          text: "售后服务",
        },
        {
          url: require("./assets/tubiao/Side04.png"),
          text: "人工服务",
        },
        {
          url: require("./assets/tubiao/Side05.png"),
          text: "购物车>>",
        },
      ],
      isAuth: false,
      scrollHeight:'',
      Sideewm:false,
    };
  },

  mounted(){
    setInterval(()=>{
      this.scrolltop()
    })
    
  },

  methods:{
    // 被卷去的高度
    scrolltop(){
      this.scrollHeight=`${document.documentElement.scrollTop}`
      if(this.scrollHeight>=855)
      {
        this.isAuth=true
        this.$refs.Distancetop.style.top='100px'
      }
      else
      {
        this.isAuth=false
        this.$refs.Distancetop.style.top='260px'
      }
    },    
  }
}
</script>

<style scoped>
#app {
  margin: 0 auto;
  width: 100%;
}
article {
  margin-top: 20px;
  background-color: #f5f5f5;
}
.tp {
  padding-top: 40px;
  margin: 0px auto;
  width: 1226px;
  height: 120px;
}
/* 侧边栏 */
.Sidemenu {
  position: absolute;
  position: fixed;
  top: 260px;
  right: 0px;
  z-index: 99;
}
.Sidemenu ul li a {
  display: block;
  background-color: #fff;
  border: 1px solid #f5f5f5;
}
.Side_img_box {
  width: 30px;
  height: 30px;
  padding-top: 10px;
  margin: 0 auto 8px;
}
.Sidemenu .text {
  display: inline-block;
  text-align: center;
  font-size: 15px;
  padding: 3px 10px 10px 10px;
  color: rgb(160, 160, 160);
}
.Sidemenu .retun_top {
  margin-top: 10px;

}

.Side_ewm{
  position: absolute;
  right:100px;
  top: 0;
  width: 130px;
  height: 191px;
  border: 1px solid #f5f5f5;
  background-color: white;
}

.Side_ewm .Side_ewm_img{
  width: 90px;
  height: 90px;
  margin: 20px;
}
.Side_ewm .Side_ewm_img span{
  display: inline-block;
  text-align: center;
  margin: 14px auto 0;
  color: #757575;
}
</style>
